<template>
	<view class="records" @click="toDetail(item)">
		<view class="records-item" :style="isListSty ? 'width:100%;margin: 20rpx 0 0 0;' : ''">
			<view class="records-item-head">
				<view class="buildding">
					<!-- <image src="@/static/images/index/build.svg	" mode=""></image> -->
					<view :class="isListSty ? 'isListSty' : ''">
						<view v-if="typeIdx == 1">
							<text>{{ tabIdx == 0 ? (item.status == 4 || item.status == 5) ? '维保签字时间' : '完成时间' : '完成时间'
							}}:</text>
							<text>{{ tabIdx == 0 ? (item.status == 4 || item.status == 5) ?
								dateStringFilter(item.maintainSignatureTime) :
								dateStringFilter(item.finishTime) : dateStringFilter(item.finishTime)
							}}</text>
						</view>
						<view v-else>{{ ['排期时间:', '报障时间:', '报警时间:', '申请时间:'][tabIdx] }}
							{{ tabIdx == 0 ? dateStringFilter(item.time).split(' ')[0] : dateStringFilter(item.time) }}
						</view>
					</view>
				</view>
				<view class="status" v-if="tabIdx == 0">
					<image :src="statusBy[item.status].icon"></image>
					<view :style="{ color: statusBy[item.status].color }">{{ statusBy[item.status].text }}</view>
				</view>
				<view class="status" v-if="tabIdx == 1">
					<image v-if="statusWx[item.status].icon" :src="statusWx[item.status].icon"></image>
					<view :style="{ color: statusWx[item.status].color }">{{ statusWx[item.status].text }}</view>
				</view>
				<view class="status" v-if="tabIdx == 2">
					<image v-if="statusRescue[item.status].icon" :src="statusRescue[item.status].icon"></image>
					<view :style="{ color: statusRescue[item.status].color }">{{ statusRescue[item.status].text }}
					</view>
				</view>
				<view class="status" v-if="tabIdx == 3">
					<image v-if="statusPj[item.status].icon" :src="statusPj[item.status].icon"></image>
					<view :style="{ color: statusPj[item.status].color }">{{ statusPj[item.status].text }}</view>
				</view>
			</view>

			<view class="records-item-content">
				<view class="tagDesc">
					<view class="left">
						<view class="tags" v-if="tabIdx == 0">
							<tags-component label="保养：" :templateNames="stringSplit(item.planDesc)" />
						</view>
						<view class="tags" v-if="tabIdx == 1">
							<view class="lable">维修：</view>
							<view class="tag" v-if="item.partsNames">{{ item.partsNames }}
								<text v-if="item.partsNames && item.floorStandNames">({{  item.floorStandNames.replaceAll(',','>')  }})</text>	
							</view>
							<template v-if="item.problemItemNames">
								<view class="tag" v-for="tag in item.problemItemNames" :key="tag">{{ tag }}</view>
							</template>
						</view>
						<view class="tags delate" v-if="tabIdx == 3" style="padding: 0rpx;">
							<view class="lable">配件：</view>
							<view class="labs">
								<view class="lab blue">{{ item.partName }}
									<text v-if="item.partName && item.floorStandNames">({{  item.floorStandNames.replaceAll(',','>')  }})</text>	
								</view>
								<view class="lab blue">数量:{{ item.partNum }}</view>
							</view>
						</view>
						<view class="tags" v-if="tabIdx == 2">
							<view class="lable">报警类型：</view>
							<view class="tag">{{ item.trapType == 1 ? '伤人' : '困人' }}</view>
						</view>
						<view class="tags" v-if="tabIdx == 2">
							<view class="lable">报警备注：</view>
							<view class="">{{ item.planDesc || '-' }}</view>
						</view>
						<view class="tags" style="margin: 0px;" v-if="item.emerProcType">
							<text class="emerProcTag" v-for="(it, i) in btnBoxList" :key="i"
								:style="{ color: it.color, borderColor: it.color, }" v-if="item.emerProcType == it.key">
								{{ it.label }}
							</text>
						</view>
					</view>
					<view class="right" v-if="item.list && item.list.length <= 2">
						<view v-for="(user, uIdx) in item.list" :key="uIdx" :class="['menber']"
							:style="{ background: !(user.signUser && user.signUser.isPlanStatus) ? '#b9b9b9' : userinfo.nick_name === user.signUser.userName ? '#0091ff' : '#00C6C0' }">
							<view></view>
							<text v-if="user.signUser">
								{{
									user.signUser.userName.length > 2 ? user.signUser.userName.slice(-2) :
									user.signUser.userName
								}}
							</text>
							<text v-else>{{ user.userName.length > 2 ? user.userName.slice(-2) : user.userName }}</text>
						</view>
					</view>
					<zb-tooltip @handchange="handchange($event, parentIdx, childIdx)" :items="item"
						v-if="item.list && item.list.length > 2" placement="bottom" background="#fff" :right="20" :topS="40"
						color="#333" :showIcon="false">
						<view class="right">
							<view v-for="(user, uIdx) in item.list.slice(0, 2)" :key="uIdx" :class="['menber']"
								:style="{ background: !(user.signUser && user.signUser.isPlanStatus) ? '#b9b9b9' : userinfo.nick_name === user.signUser.userName ? '#0091ff' : '#00C6C0' }">
								<text v-if="user.signUser">
									{{
										user.signUser.userName.length > 2 ? user.signUser.userName.slice(-2) :
										user.signUser.userName
									}}
								</text>
								<text v-else>{{
									user.userName.length > 2 ? user.userName.slice(-2) : user.userName
								}}</text>
							</view>
							<image :style="item.usermore ? 'transform: rotate(180deg);' : ''" src="@/static/images/down.png"
								mode=""></image>
						</view>
						<view class="userlist" slot="content">
							<view v-for="(user, uIdx) in item.list" :key="uIdx" class="userlist-item">
								<view :class="['menber']"
									:style="{ background: !(user.signUser && user.signUser.isPlanStatus) ? '#b9b9b9' : userinfo.nick_name === user.signUser.userName ? '#0091ff' : '#00C6C0' }">
									<text v-if="user.signUser">
										{{
											user.signUser.userName.length > 2 ? user.signUser.userName.slice(-2) :
											user.signUser.userName
										}}
									</text>
									<text v-else>{{
										user.userName.length > 2 ? user.userName.slice(-2) : user.userName
									}}</text>
								</view>
								<view class="userlist-item-name"
									:style="!(user.signUser && user.signUser.isPlanStatus) ? 'color: #999999;' : 'color: #333'">
									<text>{{ user.userName }}</text>
								</view>
							</view>
						</view>
					</zb-tooltip>
				</view>
			</view>
			<!-- 延期保养操作 -->
			<view class="delate" v-if="tabIdx == 0">
				<view class="labs">
					<view class="lab" v-if="item.overdueDateDesc">
						{{ item.overdueDateDesc }}
					</view>
					<view class="lab" style="background: #fdf1e9;color: #fa6400;"
						v-if="item.timeliness && item.timeliness.indexOf('超时') != -1 || item.isDeferred === 1 && item.timeliness != '及时'">
						{{
							item.timeliness
						}}</view>
					<!-- <view class="lab" v-if="item.isDeferred === 1">延期保养</view> -->
					<!-- <view class="lab" v-if="(item.deferType === 1 || item.deferType === 5) ">{{item.deferType === 1?'已延期':'特殊延期'}} </view> -->
				</view>
			</view>
			<view class="delate" v-if="tabIdx == 0">
				<view class="labs">
					<view class="lab" v-if="(item.deferType === 1 || item.deferType === 5)">{{
						item.deferType ===
						1 ? '已延期' : '特殊延期'
					}} </view>
				</view>
			</view>

			<view class="handle" v-if="showTurnBtn && typeIdx === 1">
				<view class="handle_btn" @click.stop="handleMore(item, item.typeStatus, item.planId)">更多操作</view>
			</view>
		</view>

		<!-- 延期保养对话框start -->
		<uni-popup ref="deferredPopup">
			<view class="popup">
				<view class="title">延期保养</view>
				<view class="content">
					<view>此任务将推迟到</view>
					<view class="delay_date">
						<text>{{ tomorrowDate + '(明天)' }}</text>
						执行
					</view>
					<view class="delay_detail">
						<view>{{ item.buildingName + item.elevatorAddress }}</view>
						<view>{{ contentList.join(',').replace(/,/g, '+') }}</view>
					</view>
				</view>
				<view class="bottom">
					<view @click="$refs.deferredPopup.close()">取消</view>
					<view class="comfire" @click="rescueComfire">确认</view>
				</view>
			</view>
		</uni-popup>
		<!-- 延期保养对话框end -->
	</view>
</template>

<script>
import { getContent } from '@/apis/index.js';
import { formatTime } from '@/utils/utils.js';
import { setRescue } from '@/apis/rescue.js';
import { mapState, mapActions } from 'vuex';
import dayjs from 'dayjs';

// 多标签组件
import tagsComponent from '@/components/tagsComponents/index';

export default {
	components: { tagsComponent },
	props: {
		item: {
			type: Object,
		},
		tabIdx: {
			type: Number,
			default: 0
		},
		typeIdx: {
			type: Number,
			default: 0  // 0-进行中  1-已完成
		},
		userMore: {
			type: Boolean,
			default: false
		},
		elevatorId: {
			type: String
		},
		parentIdx: {
			type: Number
		},
		childIdx: {
			type: Number
		},
		isListSty: {
			type: Boolean,
			default: false
		},
	},
	computed: {
		...mapState('user', ['userinfo']),
		showTurnBtn() {
			let flag = false;
			if (this.item.auditType === 1) {// 非年审梯
				// 如果是待处理//非年审梯
				if (this.item.status === 1 && (!this.item.timeliness || this.item.timeliness == '及时')) {
					flag = true;
				}
			} else {
				// 如果是待处理//年审梯
				if (this.item.status === 1 && (!this.item.timeliness || this.item.timeliness == '及时')) {
					flag = true;
					// 年审梯 已延期特殊延期过 不显示更多按钮 
					if (this.item.planDate) {
						if ((this.item.deferType === 1 || this.item.deferType === 5) && new Date(this.item.planDate.replaceAll('-', '/')).getTime() / 1000 === new Date(dayjs().format('YYYY/MM/DD')).getTime() / 1000) {
							flag = false;
						}
					}
				}
			}
			return flag;
		}
	},
	data() {
		return {
			btnBoxList: [  // 紧急程度标签
				{ color: '#0091FF', bgColor: '#dcf0ff', label: '较低', key: '4', },
				{ color: '#F7B500', bgColor: '#fff7e1', label: '普通', key: '3', },
				{ color: '#fa6400', bgColor: '#ffecdf', label: '紧急', key: '2', },
				{ color: '#e02020', bgColor: '#ffecec', label: '非常紧急', key: '1', },
			],
			statusBy: {
				// 保养状态列表
				1: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png'
				},
				2: {
					text: '进行中',
					color: '#0091ff',
					icon: '/static/images/index/2.png'
				},
				3: {
					text: '已提交',
					color: '#F7B500',
					icon: '/static/images/index/3.png'
				},
				4: {
					text: '已完成',
					color: '#333',
					icon: '/static/images/index/s4d.png'
				},
				5: {
					text: '维保签字',
					color: '#333',
					icon: '/static/images/index/s4d.png'
				}
			},
			statusWx: {
				// 维修状态
				1: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png'
				},
				2: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png'
				},
				3: {
					text: '进行中',
					color: '#0091ff',
					icon: '/static/images/index/2.png'
				},

				4: {
					text: '已完成',
					color: '#333',
					icon: '/static/images/index/s4d.png'
				},
				5: {
					text: '已关闭',
					color: '#999',
					icon: ''
				},
				6: {
					text: '已驳回',
					color: '#999',
					icon: ''
				}
			},
			statusPj: {
				// 配件状态
				5: {
					text: '待开始',
					color: '#16BF99',
					icon: '/static/images/index/1.png'
				},
				6: {
					text: '更换中',
					color: '#0091ff',
					icon: '/static/images/index/2.png'
				},

				7: {
					text: '已完成',
					color: '#333',
					icon: '/static/images/index/s4d.png'
				},
				9: {
					text: '已关闭',
					color: '#999',
					icon: ''
				},
				8: {
					text: '已驳回',
					color: '#999',
					icon: ''
				}
			},
			statusRescue: {
				// 配件状态
				1: {
					text: '调度中',
					color: '#16BF99',
					icon: '/static/images/index/1.png'
				},
				3: {
					text: '已出发',
					color: '#0091ff',
					icon: '/static/images/index/2.png'
				},

				4: {
					text: '已到达',
					color: '#0091ff',
					icon: '/static/images/index/2.png'
				},
				5: {
					text: '已救援',
					color: '#999',
					icon: '/static/images/index/s4d.png'
				}
			},
			tomorrowDate: formatTime(new Date().getTime() + 24 * 60 * 60 * 1000),
			contentList: []
		};
	},
	created() { 
	},
	methods: {
		// 延迟保养
		handleDelay(item, type, planId) {
			console.log(item);
			uni.showActionSheet({
				itemList: [type == 1 ? '延期保养' : '转单'],
				success: async res => {
					if (res.tapIndex == 0) {
						this.contentList = await this.fetchTemContent();
						this.$refs.deferredPopup.open();
					}
				},
				fail(res) { }
			});
		},
		// 更多操作 年审和非年审跳转
		handleMore(item) {
			if (this.item.planContentUserVos && this.item.planContentUserVos.length > 0) {
				let result = this.item.planContentUserVos.some((it) => it.userId === this.userinfo.user_id);
				if (!result) {
					uni.showModal({
						title: '提示',
						content: '你没有权限操作该任务',
						showCancel: false,
						confirmText: '我知道了',
						success: (res) => {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
			}

			let arr = ['延期保养', '提前保养'];
			if (item.status === 1 && (!item.timeliness || item.timeliness == '及时')) {// 待开始+未逾期
				if (item.auditType === 2) {// 年审类型
					arr = ['延期保养'];
					if (item.deferType === 5 || item.deferType === 1) {// 被特殊年审延期过后
						arr = ['提前保养'];
					}
				}

				if (item.auditType === 1) {// 非年审类型
					if (item.planDate) {
						if (new Date(item.planDate.replaceAll('-', '/')).getTime() / 1000 <= new Date().getTime() / 1000) {// 小于等于今天任务的日期只显示延期
							arr = ['延期保养'];
						}
					}
				}

				uni.showActionSheet({
					itemList: arr,
					success: async res => {
						let needObj = {
							planId: this.item.planId,
							buildingAddress: this.item.buildingName + this.item.elevatorAddress,
							planCheckName: this.item.templateNames ? this.item.templateNames[0] : '',
							planDate: this.item.planDate,
							auditType: this.item.auditType
						};
						if (this.item.auditType === 1) {// 非年审
							let str = '';
							if (res.tapIndex === 0) {// 去延期保养页面
								str = '/pageModules/yearTrial/calendarEdit?needObj=' + JSON.stringify(needObj) + '&nums=' + 1;
							}
							if (res.tapIndex === 1) {// 去提前保养页面 
								str = '/pageModules/yearTrial/calendarEdit?needObj=' + JSON.stringify(needObj) + '&nums=' + 2;
							}
							uni.navigateTo({
								url: str
							});
						}
						if (item.auditType === 2) {// 年审
							if (res.tapIndex == 0 && arr[0] === '延期保养') {
								uni.navigateTo({
									url: '/pageModules/yearTrial/yearDelay?needObj=' + JSON.stringify(needObj)
								});
							}
							if (res.tapIndex == 0 && arr[0] === '提前保养') {
								uni.navigateTo({
									url: '/pageModules/yearTrial/calendarEdit?needObj=' + JSON.stringify(needObj) + '&nums=' + 3
								});
							}
						}
					},
					fail(res) { }
				});
			}
		},
		fetchTemContent() {
			return new Promise(resolve => {
				getContent({ planId: this.item.planId })
					.then(res => {
						resolve(res.data);
					})
					.catch(resolve => {
						resolve([]);
					});
			});
		},
		// 延期保养
		rescueComfire() {
			setRescue({ id: this.item.planId, isDeferred: 1 }).then(res => {
				// console.log(res,'延期保养')
				if (res) {
					uni.showToast({
						title: '延期成功',
						icon: 'none'
					});
					this.$refs.deferredPopup.close();
					this.$emit('update');
				}
			});
		},
		handchange(val, parentIdx, childIdx) {
			// this.list[index].usermore = val;
			// console.log(val,index);
			this.$emit('userMore', { val, parentIdx, childIdx });
		},
		dateStringFilter(date) {
			if (!date) {
				return '';
			} else {
				// date.slice(0, 10)
				return date.replaceAll('-', '/');
			}
		},
		// 去工单详情
		toDetail(item) {
			console.log(item, 9999);
			if (item.typeStatus == 2) {
				// 维修详情
				uni.navigateTo({
					url: '/subpages/repair/repariDetail?planId=' + item.planId + '&elevatorId=' + this.elevatorId
				});
			}
			// 配件更换
			if (item.typeStatus == 4) {
				uni.navigateTo({
					url: `/subpages/workOrders/partOrder?planId=${item.planId}&elevatorId=${this.elevatorId}`
				});
			}
			if (item.typeStatus == 1) {
				// 保养详情
				// let objs = {
				// 	overdueName: item.timeliness,
				// 	planCheckName: item.templateNames && item.templateNames.join(","),
				// }
				let overdueName = item.timeliness;
				let planCheckName = item.templateNames && item.templateNames.join(',');
				uni.navigateTo({
					url: `/subpages/workOrders/detail?planId=${item.planId}&elevatorId=${this.elevatorId}&overdueName=${overdueName}&planCheckName=${planCheckName}`
				});
			}

			if (item.typeStatus == 3) {
				uni.navigateTo({
					url: `/subpages/rescue/rescueDetail?type=1&planId=${item.planId}&elevatorId=${this.elevatorId}`
				});
			}
		},
		stringSplit(str) {
			return str.split(',');
		}
	}
};
</script>

<style lang="scss" scoped>
.records {
	width: 100%;
	color: #333;

	&-item {
		width: calc(100% - 40rpx);
		margin: 20rpx;
		background-color: #fff;
		border-radius: 8rpx;
		box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(177, 177, 177, 0.5);

		&-head {
			display: flex;
			color: #333333;
			font-size: 26rpx;
			justify-content: space-between;
			align-items: center;
			// align-items: baseline;
			border-bottom: 2rpx solid #eeeeee;
			padding: 20rpx;

			.buildding {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				flex: 1;
				color: #999;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 7rpx;
					padding-top: 5rpx;
				}

				view {
					flex: 1;
					line-height: 38rpx;
				}

				.isListSty {
					font-size: 24rpx;
				}
			}

			.status {
				display: flex;
				justify-content: flex-end;
				align-items: flex-start;
				width: 200rpx;

				image {
					width: 32rpx;
					padding-top: 3rpx;
					height: 32rpx;
					margin-right: 7rpx;
				}
			}
		}

		.tagDesc {
			display: flex;
			justify-content: space-between;
			width: 100%;
			align-items: baseline;
			padding-bottom: 10rpx;
		}

		.delate {
			padding: 0 20rpx;
			padding-bottom: 20rpx;

			.labs {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: baseline;

				.lab {
					font-size: 24rpx;
					color: #e02020;
					background: #ffe3e3;
					padding: 0rpx 13rpx;
					border-radius: 4rpx;
					margin: 8rpx 0;
					margin-right: 8rpx;
				}

				.blue {
					color: #0091ff;
					background: #dcf0ff;
				}
			}
		}

		&-content {
			padding: 0rpx 20rpx;
			padding-bottom: 20rpx;
			display: flex;
			align-items: center;
			// padding-bottom: 12rpx;
			position: relative;

			.left {
				flex: 1;

				.name {
					font-size: 32rpx;
					font-weight: bold;
				}

				.tags {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
					align-items: baseline;
					font-size: 26rpx;
					color: #666;
					margin: 16rpx 0;
					margin-bottom: 0;
					position: relative;

					.tag {
						border: 2rpx solid #cccccc;
						border-radius: 20rpx;
						font-size: 24rpx;
						padding: 0rpx 13rpx;
						margin: 8rpx 0;
						margin-right: 12rpx;
						color: #333;
					}

					.emerProcTag {
						font-size: 24rpx;
						border: solid 2rpx transparent;
						padding: 0 13rpx;
						border-radius: 8rpx;
					}
				}

			}

			.right {
				margin-top: 16rpx;
				display: flex;
				align-items: center;
				width: 170rpx;
				justify-content: flex-end;
				flex-wrap: wrap;

				.menber {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 20rpx;
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					background-color: #0091ff;
					color: #fff;
					margin-left: 4rpx;
				}

				image {
					width: 25rpx;
					height: 25rpx;
					margin-left: 5rpx;
					transition: 0.3s all;
				}
			}

			.userlist {
				margin-top: 16rpx;

				&-item {
					display: flex;
					align-items: center;
					width: 180rpx;
					margin-bottom: 17rpx;

					.menber {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 20rpx;
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
						background-color: #0091ff;
						color: #fff;
						margin-left: 4rpx;
						margin-right: 14rpx;
					}

					&-name {
						font-size: 24rpx;
						color: #333;
						overflow: hidden;
						flex: 1;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				&-item:last-child {
					margin-bottom: 0;
				}
			}
		}

		&-bottom {
			padding: 20rpx;
			border-top: 2rpx solid #eeeeee;
			color: #999999;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.handle {
		padding: 0 16rpx;
		height: 68rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		border-top: 2rpx solid #eeeeee;

		.handle_btn {
			height: 36rpx;
			padding: 0 30rpx;
			border: 2rpx solid #cccccc;
			border-radius: 4rpx;
			color: #333;
			font-size: 24rpx;
			display: flex;
			align-items: center;
		}
	}

	.popup {
		padding: 24rpx 28rpx 0 28rpx;
		box-sizing: border-box;
		background-color: #fff;
		width: 506rpx;
		border-radius: 16rpx;

		.title {
			color: #333;
			font-size: 32rpx;
			font-weight: 500;
			padding-bottom: 20rpx;
		}

		.content {
			text-align: center;
			color: #333;
			margin-bottom: 38rpx;

			.delay_date {
				margin-bottom: 16rpx;
				font-size: 28rpx;

				text {
					color: #0091ff;
				}
			}

			.delay_detail {
				color: #999;
				font-size: 24rpx;
			}
		}

		.bottom {
			display: flex;
			border-top: 2rpx solid #f5f5f5;
			height: 76rpx;

			view {
				display: flex;
				flex: 1;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #999;
			}

			.comfire {
				color: #0091ff;
				border-left: 2rpx solid #f5f5f5;
			}
		}
	}
}
</style>